<template>
	<div class="alertBox stationBox">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle" v-text="title"></p>
				<div class="myClose" @click="closeStation">
					<img src="~_assets/close.png" class="myClose"/>
				</div>
			</div>
			<div class="alertBody">
				<div class="changeDiv" v-show="!isCheck">
          <p class="alertText">地域:</p>
          <el-cascader :options="options" v-model="alertCity" clearable></el-cascader>
					<p class="alertText" v-text="typeName"></p>
					<input type="text" class="alertInput groupName" placeholder="请输入名称" v-model="discountGroupName"/>
          <p class="alertText" v-show="iStation">大楼状态:</p>
          <el-select v-model="buildStatus" placeholder="请输入大楼状态" style="margin-left:1%" v-show="iStation">
            <el-option
              v-for="item in buildingStatus"
              :key="item.value"
              :value="item.label"
              :label="item.value">
            </el-option>
          </el-select>
          <div class="searchBut" @click="getDate"><img src="~_assets/search.png" class="foundPic" />搜索</div>
				</div>
        <el-checkbox v-model="allStatus" style="margin-left:3%" :disabled="isCheck" v-show="iStation">全部电站</el-checkbox>
        <el-tooltip class="item" effect="dark" content="新建电站会自动生效当前活动" placement="right" v-show="iStation"> 
          <i class="el-icon-warning-outline"></i>
        </el-tooltip>
				<div class="changeDiv">
					<bootstrap-table :my_columns="my_columns" :my_data="data1" :my_options="my_options" ref="table"></bootstrap-table>
				</div>
				<div class="alertBut">
					<button class="isFalse" @click="closeStation(0)">取消</button>
					<button class="isTrue" @click="closeStation(1)" v-show="!isCheck">确认</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { area } from "_config/common.js";
import {
  FIND_USABLE_SITE_BY_PARAM,
  FIND_BY_PARAM_GROUPING
} from "@/config/url";
export default {
  props: ["type", "ids", "seeStation"],
  data() {
    return {
      allStatus: false, //所有电站
      title: "", //标题
      iStation: false, //区分电站和分组
      buildStatus: null, //大楼状态
      url: "", //
      province: null, //省
      city: null, //市
      area: null, //区
      discountGroupName: "", //分组的名称
      groupId: this.ids ? this.ids : null,
      dialogType: this.type.type,
      alertCity: [],
      options: area,
      // page: 1,
      // size: 10,
      buildingStatus: [
        {
          value: "全部",
          label: null
        },
        {
          value: "启用",
          label: "120010"
        },
        {
          value: "禁用",
          label: "120012"
        },
        {
          value: "建设中",
          label: "120011"
        }
      ],
      my_columns: [],
      data1: [],
      my_options: {
        // pagination: true,
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    closeStation(type) {
      if (type == 1) {
        let items = {};
        if (this.allStatus) {
          items.data = [
            {
              id: 0
            }
          ];
        } else {
          items.data = this.$refs.table.getSelections();
        }
        if (this.dialogType == 1) {
          items.type = 1;
        } else {
          items.type = 2;
        }
        items.allStatus = this.allStatus;
        if ((items.data && items.data.length > 0) || this.allStatus) {
          this.$emit("closeStation", items);
        } else {
          this.$message({
            message: "请先选择数据",
            type: "warning"
          });
        }
      } else {
        this.$emit("closeStation");
      }
    },
    getDate(params) {
      if (this.dialogType == 1) {
        let that = this;
        let params = {};
        params.buildId = this.ids == "0" ? null : this.ids;
        params.buildName = this.discountGroupName;
        params.buildStatus = this.buildStatus;
        params.province = this.alertCity[0];
        params.city = this.alertCity[1];
        params.area = this.alertCity[2];
        params.page = 1;
        params.size = 3000;
        this.$fetch(this.url, params)
          .then(res => {
            if (res.status == 1) {
              this.data1 = res.rows;
            } else {
              this.$message({
                message: res.data,
                type: "warning"
              });
            }
          })
          .catch(err => {
            console.log(err);
            this.$message({
              message: "获取失败",
              type: "warning"
            });
          });
      } else {
        let params = {};
        if (this.type.groupType == 1) {
          params.groupId = null;
        } else {
          params.groupId = this.groupId;
        }
        params.discountGroupName = this.discountGroupName;
        params.province = this.alertCity[0];
        params.city = this.alertCity[1];
        params.area = this.alertCity[2];
        params.page = 1;
        params.size = 3000;
        this.$fetch(this.url, params)
          .then(res => {
            if (res.status == 1) {
              this.data1 = res.rows;
            } else {
              this.$message({
                message: res.data,
                type: "warning"
              });
            }
          })
          .catch(err => {
            console.log(err);
            this.$message({
              message: "获取失败",
              type: "warning"
            });
          });
      }
    },
    getType() {
      if (this.dialogType == 1) {
        this.url = FIND_USABLE_SITE_BY_PARAM;
        this.typeName = "电站名称:";
        this.iStation = true;
        this.allStatus = false;
        this.isCheck = false;
        if (this.type.value == "see") {
          this.title = "查看电站";
          this.my_columns = [
            
            {
              title: "序号",
              field: "",
              formatter: function(i, row, index) {
                return index + 1;
              }
            },
            {
              title: "电站名称",
              field: "name",
              formatter: function(i, row, index) {
                return i;
              }
            },
            {
              title: "状态",
              field: "status",
              formatter: function(i, row, index) {
                if (i == 120010) {
                  return "启用";
                } else if (i == 120011) {
                  return "建设中";
                } else if (i == 120012) {
                  return "禁用";
                }
              }
            }
          ];
        } else {
          this.title = "选择电站";
          this.my_columns = [
            {
              checkbox: true
            },
            {
              title: "序号",
              field: "",
              formatter: function(i, row, index) {
                return index + 1;
              }
            },
            {
              title: "电站名称",
              field: "name",
              formatter: function(i, row, index) {
                return i;
              }
            },
            {
              title: "状态",
              field: "status",
              formatter: function(i, row, index) {
                if (i == 120010) {
                  return "启用";
                } else if (i == 120011) {
                  return "建设中";
                } else if (i == 120012) {
                  return "禁用";
                }
              }
            }
          ];
        }
      } else {
        if (this.type.groupType == 1) {
          this.url = FIND_BY_PARAM_GROUPING;
          this.title = "添加分组";
          this.typeName = "分组名称:";
          this.iStation = false;
          this.isCheck = false;
          this.my_columns = [
            {
              checkbox: true
              // width
            },
            {
              title: "序号",
              field: "",
              formatter: function(i, row, index) {
                return index + 1;
              }
            },
            {
              title: "分组名称",
              field: "discountGroupName",
              formatter: function(i, row, index) {
                return i;
              }
            }
          ];
        } else {
          this.url = FIND_BY_PARAM_GROUPING;
          this.title = "查看分组";
          this.typeName = "分组名称:";
          this.iStation = false;
          this.isCheck = true;
          this.my_columns = [
            {
              title: "序号",
              field: "",
              formatter: function(i, row, index) {
                return index + 1;
              }
            },
            {
              title: "分组名称",
              field: "discountGroupName",
              formatter: function(i, row, index) {
                return i;
              }
            }
          ];
        }
      }
    }
  },
  watch: {
    allStatus(val) {
      $('table input[type="checkbox"]').attr("disabled", val);
    },
    seeStation(val) {
      this.isCheck = val;
    }
  },
  created() {
    this.getType();
    if (this.ids) {
      //查看
      this.isCheck = true;
    }
  },
  mounted() {
    this.getDate();
    $("input[name=btSelectAll]")
      .parent()
      .css("padding-top", "0.084rem");

    if (this.ids == "0") {
      this.allStatus = true;
      this.$nextTick(() => {
        $('table input[type="checkbox"]').attr("disabled", true);
      });
    }
  }
  // computed:{
  //   isCheck(){
  //     return this.seeStation;//查看电站
  //   }
  // }
};
</script>

<style lang="less" scoped>
.stationBox {
  p {
    margin-bottom: 0;
  }
  .bootstrap-table {
    padding-top: 0;
  }
  .wordBox {
    width: 50%;
  }
  .changeDiv {
    width: 95%;
  }
  .alertText {
    width: 9%;
  }
  .groupName {
    width: 30%;
  }
  .searchBut {
    margin-right: 0.05rem;
    margin-left: 0.05rem;
  }
  thead tr th:first-child .th-inner {
    padding-top: 0.084rem;
  }
}
</style>